<template>
  <div class="comment">
    <div
      class="commentInput"
      v-if="commentType != '' && commentType != 'music' && isHotComment"
    >
      <el-input
        class="textarea"
        type="textarea"
        placeholder="我在这里~"
        resize="none"
        maxlength="140"
        show-word-limit
        v-model="commentInput"
        @input="hanldeInput"
      >
      </el-input>
      <el-button
        class="announce"
        @click="commentMode ? handleComment() : handleFloorComment()"
        >发布</el-button
      >
    </div>
    <div
      v-else-if="
        commentType != '' &&
        commentType == 'music' &&
        this.$store.state.musicisShow
      "
    >
      <button @click="openDialog" class="commentBtn" v-if="isHotComment">
        <i class="el-icon-edit" style="font-size: 16px"></i> 发表我的音乐评论
      </button>
      <el-dialog
        :title="`歌曲:${musicTitle}`"
        :visible="dialogVisible"
        width="30%"
        append-to-body
        @close="handleClose()"
      >
        <el-input
          class="textarea"
          type="textarea"
          placeholder="我在这里~"
          resize="none"
          maxlength="140"
          show-word-limit
          v-model="commentInput"
          @input="hanldeInput"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="commentMode ? handleComment() : handleFloorComment()"
            >评论</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="commentHeader"><slot name="title"></slot></div>
    <div class="comments">
      <div class="item" v-for="(item, index) in comments" :key="index">
        <div class="avatar">
          <img
            :src="item.user.avatarUrl"
            alt=""
            @click="
              $router.push({
                path: '/index/personal',
                query: { id: item.user.userId }
              })
            "
          />
        </div>
        <div class="main">
          <div class="info">
            <span
              class="name"
              @click="
                $router.push({
                  path: '/index/personal',
                  query: { id: item.user.userId }
                })
              "
              >{{ item.user.nickname }}:&nbsp;</span
            >
            <span class="content" :class="{ fontColor: openMv }">{{
              item.content
            }}</span>
          </div>
          <div
            class="replied"
            v-for="(itemSon, indexSon) in item.beReplied"
            :key="indexSon"
            :class="{ bgcColor: openMv }"
          >
            <span class="name">@{{ itemSon.user.nickname }}:&nbsp;</span>
            <span class="repliedCOntent">{{ itemSon.content }}</span>
          </div>
          <div class="btnTime">
            <div class="time" :class="{ fontColor: openMv }">
              {{ item.timeStr }}
            </div>
            <div class="btn">
              <i
                @click="addLikeClick(item.liked, item.commentId)"
                class="el-icon-thumb"
                :class="item.liked ? 'el-icon-thumb-Red' : ''"
                :style="{ color: openMv ? '#fff' : '#666' }"
              >
                {{ item.likedCount }}</i
              >
              <i
                class="el-icon-position"
                @click="$message.warning('敬请期待!')"
                :style="{ color: openMv ? '#fff' : '#666' }"
              ></i>
              <i
                class="el-icon-chat-line-round"
                :style="{ color: openMv ? '#fff' : '#666' }"
                @click="floorComment(item.commentId, item.user.nickname)"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { setComment, addLikeBtn } from '@/api/discover/musicList'
export default {
  name: 'commentPage',
  data() {
    return {
      commentInput: '', // 输入的评论
      // 评论模式   true是常规评论   false是楼层评论
      commentMode: true,
      // 楼层回复前面几个字的长度
      floorCommentInputLength: 0,
      // 用于暂存楼层评论id
      floorCommentId: '',
      // 显示dialog评论
      dialogVisible: false
    }
  },
  props: {
    comments: {
      type: Array,
      default() {
        return []
      }
    },
    // 是否是热门评论
    isHotComment: {
      type: Boolean,
      default: true
    },
    // 评论的类型
    commentType: {
      type: String,
      default: ''
    },
    // 评论对象的id
    commentId: {
      type: String,
      default() {
        return ''
      }
    },
    // 歌曲评论需要歌曲名称
    musicTitle: {
      type: String,
      default() {
        return ''
      }
    },
    // 是否开启mv背景
    openMv: {
      type: Boolean,
      default: false
    }
  },
  created() {
    // console.log(this.openMv)
  },
  methods: {
    // 发布评论
    async handleComment() {
      this.dialogVisible = true
      // 判断是否登录
      if (!this.$store.state.isLogin) {
        this.$message.warning('只有登陆后才能评论哦!')
        return
      }
      if (this.commentInput === '') {
        this.$message.warning('请输入评论!')
        return
      }
      // 判断评论的类型
      let type
      switch (this.commentType) {
        case 'album':
          type = 3
          break
        case 'musicList':
          type = 2
          break
        case 'music':
          type = 0
          break
        case 'mv':
          type = 1
          break
        case 'video':
          type = 5
          break
      }
      const res = await setComment({
        t: 1,
        id: this.commentId,
        type,
        content: this.commentInput
      }).catch((err) => this.$message.error(err.response.data.msg))
      // console.log(res)
      if (!res) {
        return
      }
      if (res.data.code === 200) {
        this.commentInput = ''
        this.$message.success('发布成功!')
        this.$emit('getComment')
      } else {
        this.$message.error('发布失败!')
      }
      this.dialogVisible = false
      // console.log(this.commentInput)
    },
    // 楼层评论
    async handleFloorComment() {
      // 判断是否登录
      if (!this.$store.state.isLogin) {
        this.$message.warning('只有登陆后才能评论哦!')
        return
      }
      if (this.commentInput.length === this.floorCommentInputLength) {
        this.$message.warning('请输入评论!')
        return
      }
      // console.log(this.commentInput)
      let type
      switch (this.commentType) {
        case 'album':
          type = 3
          break
        case 'musicList':
          type = 2
          break
        case 'music':
          type = 0
          break
        case 'mv':
          type = 1
          break
        case 'video':
          type = 5
          break
      }
      const res = await setComment({
        t: 2,
        id: this.commentId,
        type,
        content: this.commentInput,
        commentId: this.floorCommentId
      }).catch((err) => this.$message.error(err.response.data.msg))
      if (!res) {
        return
      }

      if (res.data.code == 200) {
        // 清空文本框
        // 如果是单曲卡片评论，还需要关闭卡片
        // if (this.commentType == "music") {
        //   this.isCommentDialogShow = false;
        // }
        this.commentInput = ''
        this.commentMode = true
        this.floorCommentInputLength = 0
        this.floorCommentId = ''
        // this.isCommentDialogShow = false;
        this.$emit('getComment')
        this.$message.success('发布成功!')
        this.openDialog()
      } else {
        this.$message.error('评论失败,请稍后重试!')
      }
    },
    // 给评论的评论
    floorComment(commentId, nickName) {
      // console.log(this.isHotComment)
      if (this.isHotComment === false) {
        // 最新评论的输入框是隐藏的 让精彩评论的输入框处理
        this.$emit('transToHotComment', { commentId, nickName })
        return
      }
      if (this.commentType !== 'music') {
        let input = document.querySelector('.el-textarea__inner')
        // console.log(input)
        input.focus()
      } else {
        // 打开Dialog
        this.openDialog()
      }
      this.commentInput = '回复' + nickName + ': '
      this.floorCommentInputLength = this.commentInput.length
      this.commentMode = false
      this.floorCommentId = commentId
      // 调用置顶
      this.$emit('handleBacktop')
    },
    // 当点击给楼层回复后，又不想评论了，删除提示的给谁的回复后即可变成正常评论
    hanldeInput() {
      if (this.commentMode === false) {
        // 如果是楼层评论
        if (this.commentInput.length < this.floorCommentInputLength) {
          // 如果输入框的输入长度小于，楼层回复保存的值说明用户删除了给谁回复的提示，回到正常评论
          this.commentMode = true
        }
      }
    },
    // 点赞评论
    async addLikeClick(liked, commentId) {
      console.log(liked, commentId)
      // 判断是否登录
      if (!this.$store.state.isLogin) {
        this.$message.warning('只有登陆后才能点赞哦!')
        return
      }
      // 获取时间戳
      var timestamp = Date.parse(new Date())

      // 判断评论的类型
      let type
      switch (this.commentType) {
        case 'album':
          type = 3
          break
        case 'musicList':
          type = 2
          break
        case 'music':
          type = 0
          break
        case 'mv':
          type = 1
          break
        case 'video':
          type = 5
          break
      }

      let res = await addLikeBtn({
        id: this.commentId,
        cid: commentId,
        t: liked ? 0 : 1,
        type,
        timestamp
      })
      // console.log(res)
      if (res.data.code == 200) {
        this.$emit('getComment')
      } else {
        this.$message.error('点赞失败,请稍后重试!')
      }
    },
    // 打开评论dialog
    openDialog() {
      // console.log('打开评论')
      this.dialogVisible = !this.dialogVisible
      this.$nextTick(() => {
        let input = document.querySelector(' .el-textarea__inner')
        input.focus()
        // console.log(input)
      })
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false
    }
  },
  watch: {
    comments() {
      // 评论数据变化就重置
      this.commentInput = ''
    }
    // openMv() {
    //   // console.log(this.openMv)
    // }
  }
}
</script>
<style lang="scss" scoped>
.textarea {
  font-size: 18px;
  margin: 10px 0;
}
.announce {
  border-radius: 20px;
  background-color: #fff;
  color: #606266;
  border-color: #ccc;
  &:hover {
    background-color: #f2f2f2;
    color: #000;
    border-color: #ccc;
  }
}
.commentHeader {
  font-size: 20px;
  margin-top: 35px;
  margin-bottom: 35px;
}
// 评论
.item {
  border-bottom: 2px solid #f2f2f2;
  width: 100%;
  display: flex;
  margin-bottom: 20px;

  .avatar {
    margin-right: 10px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      // background-color: pink;
      cursor: pointer;
    }
  }
  .main {
    flex: 100%;
    font-size: 16px;
    color: #666;
    // padding-bottom: 20px;
    margin-bottom: 20px;
    .info {
      margin-bottom: 10px;
    }
    .info,
    .replied {
      .name {
        color: #5a8ab9;
        cursor: pointer;
      }
    }
    .replied {
      width: 98%;
      background-color: #f4f4f4;
      padding: 8px 5px;
      border-radius: 10px;
      margin: 5px 0;
      padding-left: 15px;
      margin-bottom: 10px;
    }
    .btnTime {
      display: flex;
      justify-content: space-between;
      .time {
        color: #999;
      }
      .btn {
        i {
          margin-right: 20px;
          cursor: pointer;
          color: #999;
          font-size: 16px;
        }
      }
    }
  }
}
.el-icon-thumb-Red {
  color: #ec4141 !important;
}
// 发表评论按钮
.commentBtn {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 1s;
  padding: 10px 15px;
  border-radius: 20px;
  border: none;
  background-color: #f1f1f1;
  color: #666;
  cursor: pointer;
  &:hover {
    background-color: #e1e1e1;
  }
}
.dialog-footer {
  .el-button {
    width: 70px;
    padding: 8px 10px;
    background-color: #ec4141;
    border: none;
    border-radius: 30px;
    &:hover {
      background-color: #eb2e2e;
    }
  }
}
.fontColor {
  color: #fff !important;
}
.bgcColor {
  background-color: transparent !important;
  color: #fff !important;
}
</style>
